<template>

    <div class="user_info">
        <div class="user_info_head" >
            <img :src="userCommented.avatar" alt="" title="用户头像" class="user_image">
            <div style="margin-left: 1vw;justify-content: left">
                <div class="equipment" style="  justify-content: left;">
                    <img :src="platform[0]" alt="" style="margin-right: 0.5vw;">
                    <img :src="platform[1]" alt="">
                </div>
                <p class="user_reply">@{{ userCommented.username }} </p>
                <div class="info">
                    <p style="margin-right: 0" v-html="commented.content"></p>
                    <br>
                    <p class="time" >
                        {{ commented.dateTime }}</p>
                </div>
            </div>
            <span>
            <img src="/img/common/shanchu1.png"
                 title="删除评论"
                 alt="删除"
                 class="delImg"
                 @click="deleteArticleComment(commented)"
                 v-show="userCommented.uid===loginUsers.uid || articleDetailed.uid === loginUsers.uid">
            </span>
        </div>
    </div>

</template>

<script>
import api from "@/api";
import {createWebHistory as $router} from "vue-router";
import CircleLoading from "@/components/PublicComponents/CircleLoading.vue";

export default {
    name: "ReplyBox",
    components: {CircleLoading},
    props: ['comments'],
    data() {
        return {
            path: [],
            user_id: "",
            userCommented: "",
            commented: "",
            platform: "",
            articleDetailed: "",
            loginUsers: "",
        }
    },
    watch: {
        comments(newValue, oldValue) {
            this.commented = newValue;
            api.saveUserInfo(this.comments.uid).then((res) => {  //查询评论文章用户的信息
                if(res.data.code === 200 && res.data.data){
                    this.userCommented = res.data.data;
                }

            })
        }

    },
    mounted() {
        let _this = this;

        let loginUser = JSON.parse(window.localStorage.getItem("user")); //获取登录用户的信息
        let articleDetails = JSON.parse(window.localStorage.getItem("ArticleDetails")); //获取文章新信息
        if (loginUser && articleDetails) {
            this.loginUsers = loginUser;
            this.articleDetailed = articleDetails;
        }
        //延迟接受父组件传来的评论数据
        setTimeout(() => {
            this.commented = this.comments;
            this.platform = this.commented.platform.split(",")
        }, 200)

        //请求获取所有的评论的用户数据
        api.saveUserInfo(_this.comments.uid).then((res) => {  //查询评论文章用户的信息
            this.userCommented = res.data.data;
        })

    },
    methods: {
        deleteArticleComment(item) {
            //删除评论
            api.delComments(item.cid).then((res) => {
                res.data.code === 200 ?  alert("删除评论成功") : alert("删除评论失败")
            })
            api.saveUserInfo(this.commented.uid).then((res) => {  //查询评论文章用户的信息
                this.userCommented = res.data.data;
            })

            this.$emit("handleCommentSend")
        }
    }
}
</script>

<style scoped>
.circle_box{
    width: 100%;
    height: 100%;
    min-height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.user_reply {
    padding: 0.15vh 0;
    width: 100%;
}

.user_info_head {
    display: flex;
    width: 100%;
    min-width: 400px;
    justify-content: left;
    margin-bottom: 1vh;
}

.info {
    position: relative;
    border-radius: 5px;
    width: 100%;
}

.info p {
    display: inline-block;
    padding: 1vh 1vw;
    letter-spacing: 1px;
    font-size: 1rem;
    width: 43vw;
    min-width: 350px;
    color: #726b6b;
    text-align: left;
    border-radius: 5px;
}

.equipment {
    display: flex;
    align-items: center;
}

.equipment img {
    width: 1vw;
    height: 2vh;
    min-width: 15px;
    min-height: 15px;
}

.user_image {
    border-radius: 0.4vw;
    width: 3vw;
    height: 6vh;
    min-width: 40px;
    min-height: 40px;
}

span {
    position: absolute;
    right: 0;
    bottom: 5%;
}

span img {
    width: 1.5vw;

}

.delImg {
    position: absolute;
    bottom: 1%;
    right: 0;
    width: 1.5vw;
    height: 3vh;
    min-width: 15px;
}

.delImg:hover {
    cursor: pointer;
    opacity: .8;
}

@media (min-width: 0) and (max-width: 600px) {
    .user_info_head {
        min-width: 200px !important;
    }
    .info p{
         min-width: 300px !important;
         font-size: 14px !important;
     }
}
.info .time{
    color: #5b5757;
    background: none;
    font-size: 0.8vw;
}
</style>